<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-01-10 12:16:10
-->
<template>
    <div class="singer-detail w">
        <!-- 歌手基本信息 -->
        <SingerInfo :singerInfo="info.singerDel" :isSub="info.isSub"></SingerInfo>
        <!-- 歌手作品信息 -->
        <div class="singer-works">
            <el-tabs @tab-click="tabClick">
                <el-tab-pane label="专辑">
                    <SingerAlbum :albumlist="info.ablumSize"></SingerAlbum>
                    <Pagination :total="info.ablumCount" :pageSize="30" @handleCurrentChange="getSingerAblumBy"
                        :currentPage="info.cpage" v-show="info.ablumSize.length != 0">
                    </Pagination>
                </el-tab-pane>

                <el-tab-pane label="热门50首">
                    <SongTable :songs="info.HotSongs"></SongTable>
                </el-tab-pane>

                <el-tab-pane label="MV">
                    <div v-if="info.singerMvList.length !== 0">
                        <div class="mv-list"> 
                            <div class="list-item" v-for="(item, index) in info.singerMvList" :key="item.id">
                                <mvlist :item="item"></mvlist>
                            </div>
                        </div>
                        <Pagination :total="info.singerDel.artist?.mvSize" :pageSize="40"
                            @handleCurrentChange="getSingerMVBy" :currentPage="info.currentPage">
                        </Pagination>
                    </div>
                    <div class="no" v-else>
                        <el-empty description="暂无MV" :image-size="200"></el-empty>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="歌手详情">
                    <SingerDes :singerName="info.singerDel.artist?.name" :singerDes="info.singerDes"
                        :briefDesc="info.briefDesc"></SingerDes>
                </el-tab-pane>

                <el-tab-pane label="相似歌手"></el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import SingerInfo from "./children/SingerInfo.vue";
import SingerDes from '@/views/singerdetail/children/SingerDes.vue'
import SongTable from '@/components/SongTable.vue'
import mvlist from '@/components/content/MVlist/mvlist.vue'
import SingerAlbum from '@/views/singerdetail/children/SingerAlbum.vue'
import Pagination from "../../components/content/Pagination.vue";
import { ElMessage } from 'element-plus'

import { useUserStore } from '@/store/user.js'
import { getSingerDes, SubSinger, getSinger50HotSong, getSingerAblum, getSingerDel, getSimSinger, getSingerMV } from '@/api/singerdetail/singerdetail.js'
import { reactive, onMounted, watch, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'

//给当前组件注入祖先函数
const reload = inject('reload')

const route = useRoute()
const router = useRouter()
const user = useUserStore()
const info = reactive({
    singerId: '', //该歌手的id
    singerDel: {}, //歌手信息
    isSub: false, //是否收藏该歌手
    ablumCount: 0, //专辑数量
    ablumSize: [],//专辑数组
    singerDes: [], //歌手介绍
    briefDesc: '', //歌手简介
    HotSongs: [], //热门50首歌
    singerMvList: [], //歌手mv列表
    currentPage: 1, //mv当前页
    cpage: 1, //专辑当前页
})

//获取歌手详细信息
async function geSingerDelBy() {
    let res = await getSingerDel(info.singerId)
    // console.log(res);
    if (res.data.code === 200) {
        info.singerDel = res.data.data
        info.ablumCount = res.data.data.artist.albumSize
    }
}

//获取歌手描述
async function getSingerDesBy() {
    let res = await getSingerDes(info.singerId)
    // console.log('描述', res);
    if (res.data.code === 200) {
        info.briefDesc = res.data.briefDesc
        info.singerDes = res.data.introduction
    }

}

//获取歌手专辑列表
async function getSingerAblumBy(page = 1) {
    info.cpage = page
    let offset = (page - 1) * 30
    let res = await getSingerAblum(info.singerId, offset)
    console.log(res);
    if (res.data.code === 200)
        info.ablumSize = res.data.hotAlbums
}

//获取歌手热门50首歌曲
async function getSinger50HotSongBy() {
    let res = await getSinger50HotSong(info.singerId)
    // console.log(res);
    if (res.data.code === 200) {
        info.HotSongs = res.data.songs
    }
}

//获取歌手mv
async function getSingerMVBy(page = 1) {
    info.currentPage = page
    let offset = (page - 1) * 40
    let res = await getSingerMV(info.singerId, offset)
    // console.log(res);
    if (res.data.code === 200) {
        info.singerMvList = res.data.mvs
    }
}

//获取歌手相似歌手  需要登录
async function getSimSingerBy() {
    if (!user.isLogin) {  //未登录
        ElMessage({
            type: 'warning',
            message: '需要用户登录!',
            showClose: true,
            center: true
        })
        return;
    }
    let res = await getSimSinger(info.singerId)
}

//tab页监听事件
function tabClick(tabs) {
    if (tabs.index == 1)
        // 获取歌手热门歌曲50首
        getSinger50HotSongBy();
    if (tabs.index == 2)
        // 获取歌手MV
        getSingerMVBy(info.currentPage);
    if (tabs.index == 3)
        getSingerDesBy()  //获取歌手描述
    if (tabs.index == 4)
        // 获取相似歌手
        getSimSingerBy();

}
//监听路由变化
watch(() => router.currentRoute.value, () => {
    reload()   //重新刷新页面  自己写的
})

onMounted(() => {
    info.singerId = route.params.id
    geSingerDelBy()  //获取歌手详细信息
    getSingerAblumBy()  //获取歌手专辑列表

})
</script>

<style lang="scss" scoped>
.singer-detail {
    .singer-works {
        margin-top: 20px;

        .mv-list {
            display: grid;
            justify-content: space-between;
            grid-template-rows: repeat(10, auto-fill);
            grid-template-columns: repeat(4, 24%);

            .list-item {
                margin-bottom: 20px;
            }
        }
    }
}

.no {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}

:deep(.el-tabs__nav-wrap::after) {
    content: none !important;
}

:deep(.el-tabs__item.is-active) {
    font-size: 20px !important;
    color: black !important;
    font-weight: 700;
}

:deep(.el-tabs__active-bar) {
    background-color: var(--mycompColor) !important;
}

:deep(.el-tabs__item:hover) {
    color: black !important;
}
</style>